<template>
  <h1>详情页面</h1>
  <h2>{{weibo.nickname}}说:{{weibo.content}}</h2>
  <p>发布于:{{weibo.created}}</p>
  <hr>
  <h3>评论相关相关</h3>
  <el-input placeholder="说点啥。。。" v-model="c.content"></el-input>
  <el-button @click="post()">评论</el-button>
  <h3>评论列表</h3>
  <div v-for="comment in arr">
    <h4>{{comment.nickname}}说{{comment.content}}<span style="font-size: 12px;color: #666;float: right">发布于:{{comment.created}}</span></h4>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";
import qs from "qs";
import {ElMessage} from "element-plus";





const c=ref({content:""});
const post=()=>{
  let user=localStorage.user?JSON.parse(localStorage.user):null;
  if (user==null){
    alert("请先登录！");
    router.push('/login');
  }
  c.value.userId=user.id;
  c.value.weiboId=weibo.value.id;
  let data=qs.stringify(c.value);
  axios.post('http://localhost:8081/v1/comments/add-new',data)
      .then(
          (response)=>{
            if (response.data.code==2001){
              ElMessage.success("发布完成！");
              c.value.content="";//清空评框的内容
              loadComments(weibo.value.id);
            }
          });
}
//评论列表
const arr=ref([]);
//根据id加载评论
const loadComments=(id)=>{
  //请求当前微博相关的评论
  axios.get('http://localhost:8081/v1/comments/'+id).then((response)=>{
    if (response.data.code==2001){
      arr.value = response.data.data;
    }
  })
}

const weibo=ref({});

onMounted(()=>{
  //从地址栏中得到id    location.search=  ?id=xx
  let id = new URLSearchParams(location.search).get('id');
  loadComments(id);
  console.log(id);
  axios.get('http://localhost:8081/v1/weibos/'+id).then(
      (response)=>{
        if (response.data.code==2001){
          weibo.value=response.data.data;
          console.log(weibo.value);
        }
      }
  )
})
</script>

<style scoped>

</style>